<template>
  <div class="my-task-item flex">
    <div class="icon-box" ref="iconBox">
      <slot></slot>
      <!-- <svg
        t="1694829249755"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="5771"
        width="18"
        height="18"
      >
        <path
          d="M529.210368 978.506752c-65.563648 0-129.174528-12.845056-189.069312-38.177792C282.299392 915.8656 230.356992 880.8448 185.754624 836.243456c-44.601344-44.601344-79.62112-96.544768-104.085504-154.386432-25.332736-59.89376-38.178816-123.506688-38.178816-189.07136 0-65.563648 12.845056-129.174528 38.178816-189.069312 24.464384-57.841664 59.48416-109.784064 104.085504-154.386432s96.544768-79.62112 154.386432-104.085504C400.034816 19.912704 463.64672 7.066624 529.210368 7.066624s129.175552 12.845056 189.070336 38.177792c57.84064 24.464384 109.78304 59.48416 154.385408 104.085504s79.622144 96.544768 104.086528 154.386432c25.33376 59.89376 38.178816 123.505664 38.178816 189.069312 0 54.377472-8.92416 107.776-26.523648 158.708736-17.004544 49.20832-41.756672 95.187968-73.573376 136.665088-0.900096 1.199104-8.650752 11.462656-16.606208 20.110336-2.845696 3.241984-15.791104 16.637952-35.888128 17.38752-10.604544 0.408576-26.78272-2.783232-43.58144-20.153344L510.199808 499.828736l0-377.50784c0-10.326016 8.370176-18.697216 18.697216-18.697216 10.326016 0 18.697216 8.370176 18.697216 18.697216l0 361.91744 297.787392 295.00416 0.155648 0.161792c3.948544 4.105216 9.777152 8.984576 15.217664 8.891392 4.617216-0.075776 8.537088-3.837952 9.24672-4.560896l0.41984-0.549888 0.132096-0.06144c7.013376-7.597056 14.34112-17.364992 14.413824-17.462272l0.139264-0.183296c29.396992-38.303744 52.260864-80.761856 67.960832-126.195712 16.239616-46.99648 24.474624-96.284672 24.474624-146.496512 0-60.531712-11.850752-119.242752-35.224576-174.501888-22.5792-53.384192-54.908928-101.331968-96.08704-142.512128-41.18016-41.18016-89.127936-73.50784-142.513152-96.08704-55.261184-23.373824-113.972224-35.224576-174.50496-35.224576S409.967616 56.310784 354.707456 79.683584c-53.384192 22.5792-101.331968 54.908928-142.512128 96.08704s-73.50784 89.127936-96.08704 142.512128c-23.373824 55.26016-35.2256 113.972224-35.2256 174.502912 0 60.532736 11.851776 119.2448 35.224576 174.50496 22.5792 53.384192 54.908928 101.331968 96.08704 142.512128s89.127936 73.506816 142.512128 96.086016c55.259136 23.373824 113.9712 35.224576 174.502912 35.224576 73.097216 0 145.6128-17.9712 209.731584-51.975168 5.942272-3.380224 69.69856-34.064384 137.851904-39.227392 10.314752-0.761856 19.275776 6.934528 20.056064 17.231872 0.780288 10.29632-6.934528 19.274752-17.231872 20.056064-61.24032 4.637696-121.65632 34.137088-122.354688 34.537472l-0.533504 0.294912C687.169536 958.978048 608.493568 978.506752 529.210368 978.506752z"
          fill="#ffffff"
          p-id="5772"
        ></path>
      </svg> -->
    </div>
    <div class="task-item">
      <div class="top">To Do</div>
      <div class="bottom">8 Task Now - 2 Start</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
let props = defineProps(["Itemcolor"]);
const iconBox = ref();
watchEffect(() => {
  if (iconBox.value) {
    iconBox.value.style.backgroundColor = `var(${props.Itemcolor})`;
  }
});
</script>

<style lang="scss" scoped>
.my-task-item {
  margin: 15px 0;
}
.icon-box {
  margin-right: 15px;
  width: 44px;
  height: 44px;
  /* background-color: var(--red); */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.task-item {
  .top {
    font-size: 18px;
    font-weight: 600;
  }
  .bottom {
    font-size: 15px;
    color: #7f7f7f;
  }
}
</style>
